<template>
  <div class="center-board">
     <el-scrollbar class="center-scrollbar">
       <el-row class="center-board-row" :gutter="formConf.gutter">
         <el-form :size="formConf.size" :label-position="formConf.labelPosition"
           :disabled="formConf.disabled" :label-width="formConf.labelWidth + 'px'">
           <draggable class="drawing-board" :list="drawingList" :animation="340"
             group="componentsGroup" @end='onCenterEnd'>
             <draggable-item v-for="(element, index) in drawingList" :key="element.renderKey"
               :drawing-list="drawingList" :element="element" :index="index" :active-id="activeId"
               :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy"
               @deleteItem="drawingItemDelete" :put="shouldClone" :end='onTableEnd' />
           </draggable>
           <div v-show="!drawingList.length" class="empty-info">
             空白
             <!-- <img src="@/assets/images/emptyElement.png" alt="" class="empty-img"> -->
           </div>
         </el-form>
       </el-row>
     </el-scrollbar>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import DraggableItem from './DraggableItem'
import { mapState } from 'vuex';
import formDesignerMixin from '../../../mixins/formDesigner'
import {
  deepClone
} from '@/utils/formIndex'
export default {  
 props:{
   formConf:[]
 },
 computed: {
   ...mapState('designer',["drawingList","drawingData","activeId","formData","activeData","activeTableItem"])
 },
 provide() {
    return {
      getShowType: () => this.showType
    }
  },
 components: {
   draggable,
   DraggableItem,
 },
 mixins: [formDesignerMixin],
  created(){
    console.log(this.drawingList,'drawingList')
    console.log(this.drawingList[0],'[0]')
    // console.log(Object.assign({},this.drawingList),'drawingList')
  },
 methods:{
   drawingItemDelete(index, parent) {
     parent.splice(index, 1)
     this.$nextTick(() => {
       const len = this.drawingList.length
       if (len) {
         this.activeFormItem(this.drawingList[len - 1])
       }
     })
   },
  onTableEnd(obj, target, conf) {
    if (obj.from == obj.to) return
    if (obj.to.className.indexOf('table') < 0) {
       this.$set(this.activeItem.config, 'isSubTable', false)
       this.$set(this.activeItem.config, 'parentVModel', '')
       if (this.$store.getters.hasTable) this.activeItem.vModel = ''
     } else {
       this.$set(this.activeItem.config, 'isSubTable', true)
       this.$set(this.activeItem.config, 'parentVModel', this.activeTableItem.vModel)
       if (this.$store.getters.hasTable) {
         this.$set(this.activeItem.config, 'relationTable', this.activeTableItem.config.tableName)
         this.activeItem.vModel = ''
       }
     }
   },
   onCenterEnd(obj) {
      this.showTip = true
      if (obj.from == obj.to) return
      if (obj.to.className.indexOf('table') > -1) {
        this.$set(this.activeItem.config, 'isSubTable', true)
        this.$set(this.activeItem.config, 'parentVModel', this.activeTableItem.vModel)
        if (this.$store.getters.hasTable) {
          this.$set(this.activeItem.config, 'relationTable', this.activeTableItem.config.tableName)
          this.activeItem.vModel = ''
        }
      }
    },
    drawingItemCopy(item, parent) {
      let clone = deepClone(item)
      clone = this.createIdAndKey(clone)
      parent.push(clone)
      this.activeFormItem(clone)
    },
 },
 data(){
  return{
    showType: 'pc',
  }
 }
}
</script>

<style>

</style>